<template>
  <view class="step-3" @click="handlePageClick">
    <!--步骤3-->
    <UploadImg style="margin-top: 10px" @updateImgPath="jsonData.coverUrl = $event" ref="UploadImg"
      :imgUrl="jsonData.coverUrl"></UploadImg>
    <view class="settings-wrapper">
      <view class="settings-item">
        <view class="item-title">练习设置</view>
        <view class="line" style="height: 3px"></view>

        <view class="option-item flex flex-row between item-center" @click.stop="actionSheet = true">
          <view class="label">试题打乱</view>
          <view class="operate flex flex-row item-center">
            <view style="color: #999999;margin-right: 6px">{{ jsonData.disruptLabel }}</view>
            <view>
              <u-icon name="arrow-right" size="14"></u-icon>
            </view>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center">
          <view class="label">答题后显示答案</view>
          <view class="operate flex flex-row item-center between fs_0">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.answerToShow"
              size="22"></u-switch>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center">
          <view class="label flex flex-row item-center">
            <view>公布成绩</view>
            <view class="relative">
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/describe-icno.svg"
                class="describe-icon" @click.stop="tipStatesClick('publicGradeResShow')" ref="tipBox" />
              <view class="describe-msg" v-show="tipStates.publicGradeResShow">
                开启公布成绩后，考生和监考在交卷结束后可查看客观题分数
              </view>
            </view>
          </view>
          <view class="operate flex flex-row item-center between">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.publicGrade" size="22"
              @change="publicGradeChange"></u-switch>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center" v-show="jsonData.publicGrade">
          <view class="label flex flex-row item-center">
            <view>分析报告</view>
            <view class="relative">
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/describe-icno.svg"
                class="describe-icon" @click.stop="tipStatesClick('analysisReportShow')" />
              <view class="describe-msg" v-show="tipStates.analysisReportShow" ref="tipBox">
                {{ publicGradeMsg }}
              </view>
            </view>
          </view>
          <view class="operate flex flex-row item-center between">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.analysisReport"
              size="22"></u-switch>
          </view>
        </view>
      </view>

      <view class="settings-item">
        <view class="item-title flex flex-row item-center">
          <view>防作弊设置</view>
          <view class="vip">vip</view>
        </view>
        <view class="line" style="height: 3px"></view>
        <view class="option-item flex flex-row between item-center">
          <view class="label flex flex-row item-center">
            <view>防离开</view>
            <view class="relative">
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/describe-icno.svg"
                class="describe-icon" @click.stop="tipStatesClick('noLeavingShow')" />
              <view class="describe-msg" v-show="tipStates.noLeavingShow" ref="tipBox">
                开启防离开验证后，考生切屏超过设置次数会导致系统强制考生交卷。
              </view>
            </view>
          </view>
          <view class="operate flex flex-row item-center between">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.noLeaving"
              size="22"></u-switch>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center select-wr">
          切屏超
          <u--input v-model="jsonData.lockTimes" border="none" />
          次或切屏超
          <u--input v-model="jsonData.lockSecond" border="none" />
          秒
        </view>

        <view class="option-item flex flex-row between item-center">
          <view class="label flex flex-row item-center">
            <view>机位绑定</view>
            <view class="relative">
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/describe-icno.svg"
                class="describe-icon" @click.stop="tipStatesClick('computerBindingShow')" />
              <view class="describe-msg" v-show="tipStates.computerBindingShow" ref="tipBox">
                开启机位绑定后，会记录考生首次登录设备标识，考生无法自主更换考试设备。
              </view>
            </view>
          </view>
          <view class="operate flex flex-row item-center between">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.computerBinding"
              size="22"></u-switch>
          </view>
        </view>
        <view class="line" style="height: 3px"></view>

        <view class="option-item flex flex-row between item-center">
          <view class="label flex flex-row item-center">
            <view style="font-size: 32rpx;font-weight: bold;">人脸验证</view>
            <view class="vip">付费</view>
            <view class="relative">
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/describe-icno.svg"
                class="describe-icon" @click.stop="tipStatesClick('faceVerification')" />
              <view class="describe-msg" v-show="tipStates.faceVerification" ref="tipBox">
                考生进入考试时，超过人脸验证次数将无法进入考试，请根据考生数量提前完成充值
              </view>
            </view>
          </view>
          <view class="link-name" @click="faceRechargeOpen">
            {{ faceCount }}人/次>>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center">
          <view class="label">登录人脸验证</view>
          <view class="operate flex flex-row item-center between fs_0">
            <u-switch activeColor="#37B874" :disabled="faceCount == 0" :inactiveColor="inactiveColor" v-model="jsonData.preTestRecognize"
              size="22"></u-switch>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center">
          <view class="label">过程人脸验证</view>
          <view class="operate flex flex-row item-center between fs_0">
            <u-switch activeColor="#37B874" :disabled="faceCount == 0" :inactiveColor="inactiveColor" v-model="jsonData.openFaceRecognize"
              size="22"></u-switch>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center select-wr" v-show="jsonData.openFaceRecognize">
          <view class="label">验证频次</view>
          <view class="operate flex flex-row item-center between">
            <u--input v-model="jsonData.intervals" border="none" />
            <view style="margin-left: 10px">分</view>
          </view>
        </view>

        <view class="option-item flex flex-row between item-center ">
          <view class="label">签字确认</view>
          <view class="operate flex flex-row item-center between fs_0">
            <u-switch activeColor="#37B874" :inactiveColor="inactiveColor" v-model="jsonData.signConfirmFlag"
              size="22"></u-switch>
          </view>
        </view>
        <view class="btn-item">
          <view class="btn" @click="submit">{{ submitBtnName }}</view>
        </view>
      </view>
      <u-action-sheet safeAreaInsetBottom :show="actionSheet" :actions="disruptTypes" title="试题类型"
        @close="actionSheet = false" @select="actionSheetSelect">
      </u-action-sheet>
      <FaceRecharge ref="faceRecharge" @success="faceRechargeSuccess"></FaceRecharge>
    </view>
  </view>
</template>
<script>
import UploadImg from "./UploadImg.vue";
import { disruptTypes } from "@/improve/components/enum";
import FaceRecharge from "./FaceRecharge.vue";
import { getCurrStudentFaceNum } from "@/improve/services";

export default {
  name: "Step3",
  components: { UploadImg, FaceRecharge },
  inject: ['prop_practice', "prop_postParams", "pro_practiceType"],
  data() {
    return {
      faceCount: 0,
      disruptTypes,
      inactiveColor: "#D9D9D9",
      actionSheet: false,
      tipStates: {
        publicGradeResShow: false,
        analysisReportShow: false,
        noLeavingShow: false,
        computerBindingShow: false,
        faceVerification: false,
      },
      jsonData: {
        coverUrl: "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/cover.jpg",
        disrupt: null,//打乱顺序
        disruptLabel: "",
        answerToShow: false,
        publicGrade: false,
        analysisReport: false,
        noLeaving: false,
        lockTimes: null,
        lockSecond: null,
        computerBinding: false,
        preTestRecognize: false,//是否开启登录认证
        openFaceRecognize: false,
        intervals: null,
        signConfirmFlag: false,//是否签字确认
        uuid: null
      },
      publicGradeMsg: ""
    }
    //每日一练里只有这两个：不打乱、选项打乱
    //在线练测里都有：不打乱、题序打乱、选项打乱、题序选项全部打乱、仅题序打乱主观题不打乱、题序选项都打乱
  },
  computed: {
    submitBtnName() {
      if (this.jsonData.uuid) {
        return "确定"
      }
      const map = { "1": "发布每日一练", "2": "发布在线练测", "3": "发布竞赛", "4": "发布有奖答题" }
      return map[this.pro_practiceType()];
    }
  },
  created() {
    this.getCurrStudentFaceNum()
  },
  methods: {
    faceRechargeSuccess() {
      this.getCurrStudentFaceNum()
    },
    getCurrStudentFaceNum() {
      getCurrStudentFaceNum().then(res => {
        this.faceCount = res
      })
    },
    faceRechargeOpen() {
      this.$refs.faceRecharge.open();
    },
    tipStatesClick(key) {
      for (let tip in this.tipStates) {
        if (tip === key) {
          this.tipStates[tip] = !this.tipStates[tip];
        } else {
          this.tipStates[tip] = false;
        }
      }
    },
    handlePageClick() {
      for (let tip in this.tipStates) {
        if (this.tipStates[tip]) {
          this.tipStates[tip] = false;
        }
      }
    },
    //公布成绩关闭 分析报告也关闭
    publicGradeChange() {
      if (!this.jsonData.publicGrade) {
        this.jsonData.analysisReport = false
      }

    },
    actionSheetSelect(item) {
      this.jsonData.disrupt = item.value
      this.jsonData.disruptLabel = item.name
      this.actionSheet = false
    },
    submit() {
      if (this.jsonData.openFaceRecognize && !this.jsonData.intervals) {
        uni.showToast({
          title: "请填写验证频次",
          icon: "none",
          duration: 2000
        });
        return
      }
      this.$emit("updatePostParams", { ...this.prop_practice(), ...this.jsonData })
    },
    //修改进入 初始数据
    initJsonData() {
      if (this.prop_practice()) {
        //进入修改界面
        const data = JSON.parse(JSON.stringify(this.prop_practice()));
        for (let key in this.jsonData) {
          this.jsonData[key] = data[key]
        }
        this.jsonData.disruptLabel = this.disruptTypes.find((item) => item.value === this.jsonData.disrupt).name
        this.publicGradeMsg = data.practiceName
        return
      }
      this.publicGradeMsg = this.prop_postParams().practiceName
    },
  },
  mounted() {
    this.initJsonData()
  }
}
</script>
<style scoped lang="scss">
.link-name {
  color: #4FAF5A;
  text-decoration: underline;
  font-size: 28rpx;
}

.vip {
  width: 30px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  font-size: 10px;
  color: #A86C12;
  background-color: #EED682;
  border-radius: 5px;
  margin-left: 13px;
}

.settings-wrapper {
  position: relative;

  .describe-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 4px;
  }

  .item-title {
    font-weight: bold;
    color: #333333;
    font-size: 32rpx;
    margin: 32rpx 0;
    padding: 20px 20px 0 20px;
    margin-top: 20rpx;
  }

  .settings-item {
    border-radius: 12px;
    background-color: #FFFFFF;

    .option-item {
      height: 60px;
      padding: 0 20px;
      border-bottom: solid 1px #F2F2F2;

      .label {
        font-size: 32rpx;
        color: #333333;
        position: relative;

        .describe-msg {
          color: #666666;
          font-size: 12px;
          background-color: #FFF7CD;
          border: solid 1px #FFDD99;
          position: absolute;
          left: 0;
          padding: 17px;
          box-shadow: 1px 5px 3px 0px rgb(0 0 0 / 12%);
          border-radius: 12px;
          border-top-left-radius: 0;
          margin-left: 10px;
          width: 140px;
          z-index: 10;
        }
      }

      .operate {
        margin-left: 16px;
      }
    }
  }

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }
}
</style>